/**
 * Created by fxy on 2017/6/4.
 */



function shownum(i) {

    //表格排名
    var str = '<tr><th>排名</th><th>团队名</th><th>得分</th></tr>';
//        ajax获取数据
    var teamnum = '';
    var teamname = '';
    var teamcoal = '';
    for (var j = i; j < i + 10; j++) {
        teamnum = '第' + j;
        teamname = '队伍' + j;
        teamcoal = j + '分';
        str += '<tr><td>' + teamnum + '</td><td>' + teamname + '</td><td>' + teamcoal + '</td></tr>'
    }
    document.getElementById('total_table').innerHTML = str;

    var strd = '<tr><th>团队名称</th><th>题目1</th><th>题目2</th><th>题目3</th>' +
        '<th>题目4</th><th>题目5</th><th>题目6</th><th>题目7</th><th>题目8</th>' +
        '<th>题目9</th><th>题目10</th><th>题目11</th></tr>';
    var teamnumd = '';
    var teamnamed = '';
    for (var k = i; k < i + 10; k++) {
        teamnamed = '队伍' + k;
        var strdk = '<tr><td>' + teamnamed + '</td>';
        var strdh = '';
        for (var h = 0; h < 11; h++) {
            coal = 'coal' + h;
            strdh += '<td>' + coal + '</td>';
        }
        strd += strdk + strdh + '</td>'
    }
    document.getElementById('detail_table').innerHTML = strd;


    //重绘图标
    var areaChartData = {
        labels: ["5分钟", "10分钟", "15分钟", "20分钟", "25分钟", "30分钟", "35分钟"],
        datasets: [
            {
                label: "队伍十一",
                fillColor: "rgba(210, 214, 222, 1)",
                strokeColor: "rgba(210, 214, 222, 1)",
                pointColor: "rgba(210, 214, 222, 1)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [10, 15, 20, 26, 35, 40, 45]
            },
            {
                label: "队伍二",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "rgba(60,141,188,0.8)",
                pointColor: "#3b8bba",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [12, 17, 19, 26, 31, 34, 39]
            },
            {
                label: "队伍三",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "red",
                pointColor: "red",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [15, 16, 20, 25, 31, 36, 42]
            },
            {
                label: "队伍四",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "yellow",
                pointColor: "yellow",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [25, 27, 29, 34, 37, 45, 51]
            },
            {
                label: "队伍五",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "pink",
                pointColor: "pink",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [16, 18, 21, 25, 29, 35, 44]
            },
            {
                label: "队伍六",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "brown",
                pointColor: "brown",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [27, 19, 26, 34, 41, 45, 51]
            },
            {
                label: "队伍七",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "aqua",
                pointColor: "aqua",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [11, 15, 25, 26, 31, 37, 41]
            },
            {
                label: "队伍八",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "darkorange",
                pointColor: "darkorange",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [25, 27, 29, 39, 42, 46, 57]
            },
            {
                label: "队伍九",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "darkmagenta",
                pointColor: "darkmagenta",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [16, 24, 31, 36, 41, 45, 47]
            },
            {
                label: "队伍十",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "chartreuse",
                pointColor: "chartreuse",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [17, 24, 26, 31, 35, 37, 41]
            }
        ]
    };

    var areaChartOptions = {
        //Boolean - If we should show the scale at all
        showScale: true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: true,
        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(0,0,0,.05)",
        //Number - Width of the grid lines
        scaleGridLineWidth: 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,
        //Boolean - Whether the line is curved between points
        bezierCurve: false,
        //Number - Tension of the bezier curve between points
        bezierCurveTension: 0.3,
        //Boolean - Whether to show a dot for each point
        pointDot: true,
        //Number - Radius of each point dot in pixels
        pointDotRadius: 4,
        //Number - Pixel width of point dot stroke
        pointDotStrokeWidth: 1,
        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
        pointHitDetectionRadius: 20,
        //Boolean - Whether to show a stroke for datasets
        datasetStroke: true,
        //Number - Pixel width of dataset stroke
        datasetStrokeWidth: 2,
        //Boolean - Whether to fill the dataset with a color
        datasetFill: true,
        //String - A legend template
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
        //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
        maintainAspectRatio: true,
        //Boolean - whether to make the chart responsive to window resizing
        responsive: true
    };

    //Create the line chart
//        areaChart.Line(areaChartData, areaChartOptions);

    //-------------
    //- LINE CHART -
    //--------------
    var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
    var lineChart = new Chart(lineChartCanvas);
    var lineChartOptions = areaChartOptions;
    lineChartOptions.datasetFill = false;
    lineChart.Line(areaChartData, lineChartOptions);


}